<template>
	<em-page class="tab-my" :em-styles="pageStyles">
		<em-scroller class="scroller" @scroll="scroll">
			<view class="top" :style="[$em.$getThemeStyle(['bg-color-1'])]">
				<em-header-inset></em-header-inset>
				<ava class="top-avatar"></ava>

				<view class="top-name">
					<text class="top-name-text" :style="[$em.$getThemeStyle(['color-1'])]">{{userInfo.name}}</text>
				</view>
			</view>

			<view class="logout">
				<view class="logout-btn" :style="[$em.$getThemeStyle(['bg-color-101'])]" @click="clickBottomFn(0)">
					<text class="logout-btn-text" :style="[$em.$getThemeStyle(['color-101'])]">关于我们</text>
				</view>
				<view class="logout-btn" :style="[$em.$getThemeStyle(['bg-color-101'])]" @click="clickBottomFn(1)">
					<text class="logout-btn-text" :style="[$em.$getThemeStyle(['color-101'])]">赞助一下</text>
				</view>
				<view class="logout-btn" :style="[$em.$getThemeStyle(['bg-color-101'])]" @click="clickBottomFn(2)">
					<text class="logout-btn-text" :style="[$em.$getThemeStyle(['color-101'])]">AI对话（开发中)</text>
				</view>
			</view>

			<em-tab-bar-inset style="padding-top: 10px;"></em-tab-bar-inset>
		</em-scroller>
		<em-header class="header" title="个人中心" :em-styles="headerStyles" :right-btns="headerRightBtns"
			@clickBtn="clickHeaderBtn"></em-header>
	</em-page>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import mixin from '../../mixins/tab'

	let app = {}
	// #ifdef MP-WEIXIN
	app = getApp({
		allowDefault: true
	}).$vm
	// #endif
	// #ifndef MP-WEIXIN
	app = getApp({
		allowDefault: true
	})
	// #endif

	const bottomEnum = Object.freeze({
		ABOUT: 0, // 关于我们
		REWARD: 1, // 喝杯咖啡 
		AICHAT: 2, // AI聊天
	})
	// freeze 防止修改 属性冻结
	// 尝试修改原型链上的对象  仍然不能修改
	// const prototype = Object.getPrototypeOf(bottomEnum);
	// prototype.newProperty = 'value4';

	import ava from "./avator.vue"

	export default {
		components: {
			ava
		},
		mixins: [mixin],
		data() {
			return {
				headerShowShadow: true
			}
		},
		computed: {
			...mapState(['userInfo']),
			pageStyles() {
				return {
					wrap: app.$getThemeStyle(['bg-color--1'])
				}
			},
			headerStyles() {
				return {
					wrap: app.$getThemeStyle(['bg-color-1', this.headerShowShadow ? 'shadow-1' : 'shadow-0']),
					title: app.$getThemeStyle(['color-1'])
				}
			},
			headerRightBtns() {
				// return [{
				// 	iconUnicode: '\uf0ea',
				// 	styles: {
				// 		btn: app.$getThemeStyle(['bg-color-104']),
				// 		icon: app.$getThemeStyle(['color-104'])
				// 	}
				// }]
			}
		},
		created() {
			// 因为nvue不支持挂载vue实例方法，但是又可以通过getApp()获取到vue实例和所挂载的方法，然后将this.$em替换，这样模板中就可以使用$em调用vue实例方法了
			this.$em = app.$em
		},
		methods: {
			load() {
				console.log('my on load')
			},
			show() {
				console.log('my on show')
			},
			hide() {
				console.log('my on hide')
			},
			scroll(e) {
				if (e.scrollTop > 42) {
					this.headerShowShadow = true
				} else {
					this.headerShowShadow = false
				}
			},
			clickHeaderBtn(e) {
				if (e.position === 'right' && e.index === 0) {
					// 跳转到设置页
					app.$navigateTo('/pages/setup/setup')
				}
			},
			clickLogin() {
				app.$navigateTo('/pages/login/login')
			},
			clickBottomFn(index) {
				switch (index) {
					case bottomEnum.ABOUT:
						app.$navigateTo('/mine/about/about')
						break;
					case bottomEnum.REWARD:
						app.$navigateTo('/mine/reward/reward')
						break;
					case bottomEnum.AICHAT:
						app.$navigateTo('/mine/chat/chat')
						break;
				}
			}

		}
	}
</script>

<style lang="scss" scoped>
	.header {
		position: absolute;
		top: 0;
		right: 0;
		left: 0;
		z-index: 101;
	}

	.scroller {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 100;
	}

	.logout {
		padding: 28px;
	}

	.logout-btn {
		flex-direction: row;
		justify-content: center;
		align-items: center;
		height: 58px;
		border-radius: 6px;
		margin-top: 5px;
	}

	.logout-btn-text {
		font-size: 14px;
		font-weight: 700;
	}


	.top {
		align-items: center;
		padding: 42px 0 42px 0;
		border-bottom-left-radius: 34px;
		border-bottom-right-radius: 34px;
		transition-property: background-color;
		transition-duration: 0.25s;
	}

	/* This was made with GlassGenerator.netlify.app */

	.glass-container {
		width: 700px;
		height: 375px;
		color: white;
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 20px;
		border-radius: 13px;
		backdrop-filter: blur(11px);
		background-color: rgba(0, 191, 255, 0.275);
		box-shadow: rgba(0, 0, 0, 0.3) 2px 8px 8px;
		border: 0px rgba(255, 255, 255, 0.4) solid;
		border-bottom: 0px rgba(40, 40, 40, 0.35) solid;
		border-right: 0px rgba(40, 40, 40, 0.35) solid;
	}

	.top-avatar {
		width: 300px;
		height: 350px;
		border-radius: 36px;
		// background-color: #E5AD8B;
		zoom: 0.4;
	}

	.css-btn {
		width: 200px;
		height: 50px;
		text-align: center;
		margin-left: calc(50% - 100px);
		line-height: 50px;
		margin-top: 0px;
		margin-bottom: 30px;
		color: #090909;
		font-size: 18px;
		font-weight: bold;
		border-radius: 0.5em;
		background: #e8e8e8;
		cursor: pointer;
		border: 1px solid #e8e8e8;
		transition: all 0.3s;
		box-shadow: 6px 6px 12px #c5c5c5, -6px -6px 12px #ffffff;
	}

	.top-name {
		margin-top: 24px;
	}

	.top-name-text {
		font-size: 19px;
		font-weight: 700;
		line-height: 19px;
	}

	.top-label {
		margin-top: 18px;
	}

	.top-label-text {
		font-size: 14px;
	}

	.list {
		padding: 0 28px;
	}

	.list-item {
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		height: 84px;
		margin-top: 18px;
		padding: 0 24px;
		border-radius: 12px;
		transition-property: background-color;
		transition-duration: 0.25s;
	}

	.list-item-left {
		flex-direction: row;
		align-items: center;
	}

	.list-item-left-icon {
		flex-direction: row;
		justify-content: center;
		align-items: center;
		width: 38px;
		height: 48px;
		border-radius: 12px;
	}

	.list-item-left-icon-text {
		font-size: 18px;
		color: #FFFFFF;
	}

	.list-item-left-title {
		flex-direction: row;
		align-items: center;
		margin-left: 18px;
	}

	.list-item-left-title-text {
		font-size: 14px;
		font-weight: 700;
	}

	.list-item-icon-bg-100 {
		background-color: #FFC592;
	}

	.list-item-icon-bg-101 {
		background-color: #F76842;
	}

	.list-item-icon-bg-102 {
		background-color: #61DAD5;
	}

	.list-item-right {
		flex-direction: row;
		align-items: center;
	}

	.list-item-right-arrow-icon {
		flex-direction: row;
		align-items: center;
	}

	.list-item-right-arrow-icon-text {
		font-size: 18px;
		font-weight: 700;
		color: #9093A2;
	}
</style>